<template>
  <div class="h-6"/>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
  >
    <el-menu-item index="0">主页</el-menu-item>
    <el-menu-item index="1">文章管理</el-menu-item>
    <el-menu-item index="2">作者管理</el-menu-item>
    <el-menu-item index="3">引文管理</el-menu-item>
    <el-menu-item index="4">数据统计</el-menu-item>
  </el-menu>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import router from "@/router";

const activeIndex = ref('0')
const linkTo = [
  '/home',
  '/document',
  '/author/list',
  '/quotation',
  '/statistic',
]
onMounted(() => handleSelect(0))
const handleSelect = (key) => {
  router.push(linkTo[key])
}

</script>
<style>

</style>